<template>
<!-- 动态class -->
<!-- 
  两种情况:
  1. 绑定对象(常用) 判断是否应用指定类名
    {类名: 是否应用这个类名}
  2. 绑定数组 应用多个类名
    ['类名一', '类名二', ...]
 -->
  <div>
    <!-- <div :class="{ red: age < 18 }"> -->
    <div :class="arr">
      你好世界!
      <button @click="arr.push('mid')">点我加类名</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      arr: ['red', 'small']
    };
  }
};
</script>

<style>
div div {
  width: 200px;
  height: 200px;
  background-color: pink;
  font-size: 40px;
}
.red {
  color: red;
}
.small {
  font-size: 10px;
}
.mid {
  color: brown;
}
</style>